<section class="content-header">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">服务管理</a></li>
        <li class="active">服务类型</li>
    </ol>
</section>
<!-- Main content 搜索 新增 删除-->
<section class="content">
    <div class="jax-box">
        <form id="formSearch" class="form-horizontal form-search">
            <div class="form-group">
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="ser-Type">服务类型:</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="ser-Type">
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="createName">创建人:</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="createName">
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <label class="control-label  col-xs-4" for="status">服务状态:</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="status">
                    </div>
                </div>
                <!--                <shiro:hasPermission name="user:list">-->
                <div class="col-md-1 col-sm-6 " style="text-align:left;">
                    <button type="button" id="btn_query" class="btn btn-info">查询</button>
                </div>
                <!--                </shiro:hasPermission>-->
            </div>
        </form>
    </div>
    <div class="jax-box jax-box-table">
        <div id="toolbar" class="btn-group">
            <shiro:hasPermission name="user:add">
                <button id="btn_add" type="button" class="btn btn-primary" data-toggle="modal" data-target="#typeModal">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增类型
                </button>
            </shiro:hasPermission>
            <shiro:hasPermission name="user:batchDelete">
                <button id="btn_batch_delete" type="button" class="btn btn-danger">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>解除合作
                </button>
            </shiro:hasPermission>
        </div>
        <table id="table"></table>
    </div>
</section>
<!-- 新增服务模态框 -->
<div id="serverModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增服务</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="serverForm">
                    <div class="box-body">
                        <div class="form-group" hidden="hidden">
                            <label class="col-sm-3 control-label">服务类型id <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="svrSerId" id="svrSerId" class="form-control" type="text" min="3"
                                       require="必填项" placeholder="" readonly/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">服务类型 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="svrSerType" id="svrSerType" class="form-control" type="text" min="3"
                                       require="必填项" placeholder="" readonly/>
                            </div>
                        </div>
                        <div class="form-group" hidden="hidden">
                            <label class="col-sm-3 control-label">服务创建人编号 <span
                                    style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="svrCreateId" id="svrCreateId" class="form-control" type="text" min="3"
                                       require="必填项" placeholder="" readonly/>
                                <span id="svr-Create-Id" hidden="hidden"><shiro:principal property="userId"/></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">服务创建人姓名 <span
                                    style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="svrCreateName" id="svrCreateName" class="form-control" type="text" min="3"
                                       require="必填项" placeholder="" readonly/>
                                <span id="svr-Create-Name" hidden="hidden"><shiro:principal property="username"/></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户编号12234 </label>
                            <div class="col-sm-8">
                                <input name="svrCustId" class="form-control" placeholder="" id="svrCustId"
                                       autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户姓名 </label>
                            <div class="col-sm-8">
                                <input name="svrCustName" class="form-control" placeholder="" id="svrCustName"
                                       autocomplete="off">
                                <div class="xlk" id="cusTomerList">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">概要 </label>
                            <div class="col-sm-8">
                                <input name="svrTitle" class="form-control" placeholder="">
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="button" id="saveServer" class="btn btn-info">确定</button>
                            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 新增类型模态框 -->
<div id="typeModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增类型</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="typeForm">
                    <div class="box-body">
                        <div class="form-group" hidden="hidden">
                            <label class="col-sm-3 control-label">创建人编号 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="serCreateId" id="serCreateId" class="form-control" type="text"
                                       require="必填项" placeholder="" readonly/>
                                <span id="ser-Create-Id" hidden="hidden"><shiro:principal property="userId"/></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">创建人姓名 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="serCreateName" id="serCreateName" class="form-control" type="text"
                                       require="必填项" placeholder="" readonly/>
                                <span id="ser-Create-Name" hidden="hidden"><shiro:principal property="username"/></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">服务类型 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="serType" id="serType" class="form-control" type="text" min="3"
                                       require="必填项" placeholder=""/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">服务概要 </label>
                            <div class="col-sm-8">
                                <input name="serTitle" class="form-control" placeholder="" id="serTitle">
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="button" id="saveType" class="btn btn-info">确定</button>
                            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 用户详情编辑模态框 -->
<div id="userDetailModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">用户信息</h4>
            </div>
            <div class="modal-body">
                <div id="userOpenWindow">
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .xlk {
        position: fixed;
        z-index: 100;
        width: 59.5%;
    }

    .xlk-ul {
        width: 100%;
        margin: 0;
        padding: 0;
        /*font-size: 0;*/
        border-radius: 4px;
        border: 1px solid grey;
        background-color: white;
    }

    .xlk-ul-li {
        width: 100%;
        display: inline-block;
        list-style: none;
    }

    .xlk-ul-li:hover {
        background-color: wheat;
    }
</style>
<script>
    var columns = [
        {checkbox: true},
        {
            field: 'serType',
            title: '服务类型',
            align: "center"
        }, {
            field: 'serCreateName',
            title: '创建人姓名',
            align: "center",
        }, {
            field: 'serCreateDate',
            title: '创建时间',
            align: "center",
        }, {
            field: 'serTitle',
            title: '服务概要',
            align: "center",
        }, {
            field: 'serStatus',
            title: '服务状态',
            align: "center",
            formatter: function (value, row, index) {
                return row.serStatus == '1' ? "合作中" : "失效";
            }
        }, {
            field: 'operation',
            title: '操作',
            align: "center",
            formatter: function (value, row, index) {
                var assign = "<a class='table-btn table-btn-info' href='javascript:void(0)' onclick='assignPermsList(" + row.serId + ")'>服务进展</a>";
                var create = "<a class='table-btn table-btn-info' href='javascript:void(0)' onclick='typePerms(" + row.serId + ",\"" + row.serType + "\")'>新建服务</a>";
                return assign + create;
            }
        }];
    var options = {
        id: "#table",
        url: '/serType/list',
        columns: columns,
        toolbar: '#toolbar',
        showRefresh: true,
        queryParams: queryParams
    }
    Core.initTable(options);
    /*查询用户参数*/
    function queryParams(params) {
        var temp = { //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            limit: params.limit, //页面大小
            offset: params.offset, //页码
            serType: $("#ser-Type").val(),
            serCreateName: $("#createName").val(),
            serStatus: $("#status").val()
        };
        return temp;
    }
    //输入框按键弹起绑定事件
    keyUpPerms = function (userId, username) {
        console.log("编号:"+userId ,"姓名:"+username)
        $("#svrCustName").val(username);
        $("#svrCustId").val(userId)
        $("#cusTomerList").text("");
    }
    /*新建用户服务*/
    typePerms = function (serId, serType) {
        var id = $("#svr-Create-Id").html();
        var name = $("#svr-Create-Name").html();
        $("#svrCreateId").val(id);
        $("#svrCreateName").val(name);
        $("#svrSerType").val(serType);
        $("#svrSerId").val(serId);
        $("#serverModal").modal("show");
    }
    //添加服务类型
    addType = function () {
        var id = $("#ser-Create-Id").html();
        var name = $("#ser-Create-Name").html();
        $("#serCreateId").val(id)
        $("#serCreateName").val(name)
    }
    //jQuery事件
    $(function () {
        //输入框按键弹起事件
        $("#svrCustName").keyup(function () {
            var name = $("#svrCustName").val();
            if (name != null && name !== "") {
                var params = {
                    custName: name,
                }
                Core.postAjax("/customer/lists", params, function (data) {
                    var customer = data.data.list;
                    console.log(customer)
                    if (customer.length > 0) {
                        var text = " <ul class='xlk-ul'>";
                        for (var i = 0; i < customer.length; i++) {
                            text = text + "<a href='javascript:void(0)' onclick='keyUpPerms(" + customer[i].id + ",\"" + customer[i].custName + "\")'><li class='xlk-ul-li'>" + customer[i].custName + "</li></a>";
                        }
                        text = text + "</ul>"
                        $("#cusTomerList").text("");
                        $("#cusTomerList").css({display: "inline"});
                        $("#cusTomerList").append(text);
                    } else {
                        $("#cusTomerList").text("");
                    }
                })
            } else {
                $("#cusTomerList").text("");
                $("#cusTomerList").css({display: "none"});
            }
        })
        /*查询*/
        $("#btn_query").click(function () {
            Core.refreshTable("#table");
        });
        /*新增*/
        $("#btn_add").click(function () {
            Core.clearError("#serverForm");
            addType();
        });
        /*解除合作*/
        $("#btn_batch_delete").click(function () {
            var checkedRows = Core.selectMutiData("#table");
            if (checkedRows) {
                Core.confirm("确定把选中的" + checkedRows.length + "条记录《解除合作》？", function () {
                    serId = "";
                    $.each(checkedRows, function (i, item) {
                        serId += (item.serId + ",");
                    })
                    serId = serId.substring(0, serId.length - 1);
                    Core.postAjax("/serType/delete", {"serId": serId}, function (data) {
                        if (data.status == 200) {
                            Core.refreshTable("#table");
                            layer.msg(data.msg);
                        }else{
                            layer.msg(data.msg);
                        }
                    }, "get")
                })
            }
        });
        /*保存服务*/
        $("#saveServer").click(function () {
            var serialize = $("#serverForm").serialize();
            Core.mask("#saveServer");
            Core.postAjax("/cstServer/add", serialize, function (data) {
                if (data.status == 200) {
                    $("#serverModal").modal("hide");
                    Core.refreshTable("#table");
                    layer.msg(data.msg);
                    clear("#serverModal");
                } else {
                    layer.msg(data.msg);
                }

            })
        });
        //保存类型
        $("#saveType").click(function () {
            Core.postAjax("/serType/add", $("#typeForm").serialize(), function (data) {
                if (data.status === 500) {
                    layer.msg(data.msg);
                } else if (data.status === 200) {
                    $("#typeModal").modal("hide");
                    layer.msg(data.msg);
                    Core.refreshTable("#table");
                    clear("#typeModal");
                } else {
                    layer.msg(data.msg)
                }
            })
        })
        //清空表单内数据
        function clear(modal) {
            $(modal).find("form").trigger("reset");
        }
    })
</script>